<template>
  <div class="query-time">
    <ul>
      <li
        v-for="(item,index) in timeContent"
        :key="index"
        :class="{'active':num==(index+1)}"
        class="clearfix"
        @click="timeQueryData(index+1)">
        <p class="fl">{{ item.name }}</p>
        <p class="fl"/>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    content: {
      type: Array,
      default: function () {

      }
    }

  },
  data () {
    return {
      num: 0,
      timeContent: this.content
    }
  },
  methods: {
    timeQueryData (index) {
      this.num = index
      this.$emit('dataQuery', index)
    },
    changeNum (num) {
      this.num = num
    },
    changeTitle () {

    }
  }
}

</script>
<style lang="scss">
.query-time {
  position: fixed;
  z-index: 2;
  top: 20%;
  ul {
    li {
      line-height: .50rem;
      &.active {
        p:nth-child(2) {
          background: #ED7D31;
        }
      }
      p:nth-child(1) {
        font-size: .24rem;
        color: #138cef;
      }
      p:nth-child(2) {
        width: .25rem;
        height: .20rem;
        background: rgba(174, 174, 174, .5);
        margin-top: .14rem;
        margin-left: .20rem;
        border-radius: .04rem;
      }
    }
  }
}

</style>
